import styled from 'styled-components'
import Icon from '@/components/Icon'
import { StyledMediaContainer } from '@/style/global'

export const StyledWrap = styled(StyledMediaContainer)`
	position: relative;
	padding-top: 14px;
	.top-nav {
		display: flex;
		justify-content: space-between;
	}
`

export const StyledContainer = styled.div`
	.operate-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		margin-top: 5px;
		.search-bar {
			display: flex;
			align-items: center;
			.operator-input,
			.name-input,
			.operational-input {
				margin-right: 50px;
			}
			.search-btn {
				margin-left: 20px;
				margin-right: 10px;
			}
			.total-msg {
				color: #4e4e4e;
				font-size: 12px;
				.reset {
					color: #007ac0;
					cursor: pointer;
					margin-left: 9px;
					text-decoration: underline;
				}
			}
		}
	}
`
export const SearchIcon = styled(Icon)`
	background-position: 0 -305px;
	width: 30px;
	height: 30px;
	&:active,
	&:hover {
		background-position: -30px -305px;
	}
`
